<template>
  <div>
    <div v-for="(item, i) in list" :key="i">
      <p v-if="!item.edit">
        <span>{{ item.name }}</span> <i class="el-icon-edit" @click="toShowEdit(item)"></i>
      </p>
      <div style="display: flex; align-items:center" v-if="item.edit">
        <el-input :value="newValue" @input="newValue = $event"></el-input>
        <i class="el-icon-circle-check" @click="confirm(item)"></i>
        <i class="el-icon-circle-close" @click="cancel(item)"></i>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  name: "",
  data() {
    return {
      list: [{name: "11.xls", fileType: '.xls'}, {name:"22.xls", fileType: '.xls'}, {name:"33.doc", fileType: '.doc'}],
      suffix: '',
      newValue: '', // 需要替换的至
    }
  },
  methods:{
    toShowEdit(item){
      this.list.forEach(item => item.edit = false)
      item.edit = true
      this.suffix = item.fileType
      this.newValue = this.cutSuffix(item.name)

      this.$forceUpdate()
    },
    cutSuffix(name){
      return name.replace(this.suffix, '')
    },
    confirm(item){
      item.name = this.newValue + this.suffix
      item.edit = false
      this.$forceUpdate()
    },
    cancel(item){
      item.edit = false
      this.$forceUpdate() 
    }

  },
}
</script>
<style lang="less" scoped></style>
